import './index.scss'
import { DatePicker } from 'antd-mobile'
import { useState,useMemo, useEffect } from 'react'
import dayjs from 'dayjs'
import { useSelector } from 'react-redux'
import DailyMooth from '@/component/DailyMooth.js'
import _ from 'lodash'

const Year = ()=>{
    const [visible,setVisible] = useState(false)
    const [yearValue,setYearValue]=useState(dayjs().format('YYYY 年'))
    const [yearList,setYearList] = useState([])
    const {billList} = useSelector(state=>state.bill)

    const handleConfirm = (date)=>{
        let year = dayjs(date).format('YYYY 年')
        setYearValue(year)
        setYearList(yearGroupList[year]||[])
    }
    const yearGroupList = useMemo(()=>{
       return _.groupBy(billList,(item)=>{
            return dayjs(item.date).format('YYYY 年')
        })
    },[billList])

    const moothGroupList = useMemo(()=>{
        return _.groupBy(yearList,(item)=>{
             return dayjs(item.date).format('YYYY-MM')
         })
     },[yearList])
    const modeDaily = useMemo(()=>{

          let result = Object.keys(moothGroupList).map((key)=>{
              let pay =  moothGroupList[key].filter(item=> item.type ==='pay').reduce((a,c)=>a+c.money,0)
              let income =  moothGroupList[key].filter(item=> item.type ==='income').reduce((a,c)=>a+c.money,0)
              
              return {
                  key,
                  pay,
                  income,
                  balance: pay+income
              }
           })
           //lodash 排序
           result = _.sortBy(result,(item)=>{
               return item.key
           })
           return result;
    },[moothGroupList])
    useEffect(()=>{
       setYearList(yearGroupList[yearValue]||[])
    },[yearGroupList,yearValue])

    //页面输入
    const modelDate = useMemo(()=>{
        const pay = yearList.filter(item=> item.type ==='pay').reduce((a,c)=>a+c.money,0)
        const income = yearList.filter(item=> item.type ==='income').reduce((a,c)=>a+c.money,0)
        return {
            pay,
            income,
            balance: pay+income
        }
    },[yearList])
    return(
        <div className='wrap'>
          {/* header */}
          <div className='wrap-header'>
            <div className='header-content' onClick={()=>setVisible(true)}>
                <span className='year'>{yearValue+''}</span>
                <span className='arrow'></span>
                <DatePicker
                    title='时间选择'
                    visible={visible}
                    precision='year'
                    onClose={() => {
                    setVisible(false)
                    }}
                    max={new Date()}
                    onConfirm={handleConfirm}
                />
            </div>
          </div>
          {/* content */}
          <div className="content-wrap">
            <div className='content-item'>
                <span>
                   {modelDate.pay}
                </span>
                <span className='pay'>
                    支出
                </span>
            </div>
            <div className='content-item'>
                <span>
                    {modelDate.income}
                </span>
                <span className='pay'>
                    收入
                </span>
            </div>
            <div className='content-item'>
                <span>
                    {modelDate.balance}
                </span>
                <span className='pay'>
                    结余
                </span>
            </div>
          </div>
          {/* contetn-list */}
          {
             <div className='wrap-year'>
               {
                 modeDaily.map(item=>{
                    return  <DailyMooth key={item.key} data={item}></DailyMooth>
                })
               }
             </div>
            
          }
          
        </div>
    )
}
export default Year